<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 300px;height:200px;border: solid 1px black;position: absolute;left:0;top:0;}
    .box h2{margin: 0;padding: 10px;background: black;color: #fff;cursor: move;}
  </style>
</head>
<body>
  <div class="box">
    <h2>这是标题</h2>
    <div class="cont">
      这是内容
    </div>
  </div>
</body>
<script>
  
  var box = document.querySelector(".box")
  var h2 = document.querySelector(".box h2")

  h2.onmousedown = function(eve){
    var downE = eve || window.event;
    // downE.preventDefault();

    document.onmousemove = function(eve){
      var moveE = eve || window.event;

      // 注意要改变位置的元素是容器，不是标题栏
      box.style.left = moveE.pageX - downE.offsetX + "px"
      box.style.top = moveE.pageY - downE.offsetY + "px"
      
    }
    
    document.onmouseup = function(){
      document.onmousemove = document.onmouseup = null;
    }
    
    return false;
  }

</script>
</html>